<template>
  <view class="addAddress absolute">
    <view class="list">
      <view class="item acea-row row-between-wrapper">
        <view class="name">姓名</view>
        <input type="text" placeholder="请输入姓名" v-model="model.real_name" required />
      </view>
      <view class="item acea-row row-between-wrapper">
        <view class="name">联系电话</view>
        <input type="text" placeholder="请输入联系电话" v-model="model.phone" required />
      </view>
	  <view class="item acea-row row-between-wrapper">
	    <view class="name">详细地址</view>
	    <view class="picker acea-row row-between-wrapper select-value form-control" @click="getLoca()">
	      <view class="address">
			<input type="text" placeholder="请选择详细地址" v-model="model.detail" required />
	      </view>
	      <view class="iconfont icon-dizhi font-color-red"></view>
	    </view>
	  </view>
      <view class="item acea-row row-between-wrapper">
        <view class="name">门牌号</view>
        <input type="text" placeholder="请填写具体门牌号" v-model="model.houseNumber" required />
      </view>
    </view>
    <view class="default acea-row row-middle">
      <view class="select-btn">
        <view class="checkbox-wrapper">
          <checkbox-group @change="changeIsDefault">
            <label class="well-check">
              <checkbox :value="model.is_default ? 'checked' : ''" :checked="model.is_default ? true : false"></checkbox>
              <text class="def">设置为默认地址</text>
            </label>
          </checkbox-group>
        </view>
      </view>
    </view>
    <view></view>
    <view class="keepBnt bg-color-red" @tap="submit">立即保存</view>
  </view>
</template>

<script type="text/babel">
import { getAddress, postAddress } from "@/api/user";
import attrs, { required, chs_phone } from "@/utils/validate";
import { validatorDefaultCatch } from "@/utils/dialog";
import cookie from "@/utils/store/cookie";
import { resolveAddress } from "@/utils/resolveAddress"

export default {
  name: "Address",
  data() {
    return {
      id: 0,
	  model: {
		  id: '',
		  real_name: '',
		  phone: '',
		  address: {
			  province: "",
			  city: "",
			  district: "",
			  city_id: "" // 无需传入
		  },
		  detail: "",
		  houseNumber: "",
		  latitude: "",
		  longitude: "",
		  is_default: false,
		  post_code: "" // 邮编
	  }
    };
  },
  mounted: function() {
    let id = this.$yroute.query.id;
    this.id = id;
    this.getUserAddress();
  },
  onShow() {
	 
  },
  methods: {
	getLoca() {
		const self = this
		uni.chooseLocation({
			latitude: self.model.id ? self.model.latitude : '',
			longitude: self.model.id ? self.model.longitude : '',
			keyword: '',
			success: function(res) {
				resolveAddress({
					latitude: res.latitude,
					longitude: res.longitude
				}).then(data => {
					self.model.detail = data.address
					self.model.latitude = data.location.lat
					self.model.longitude = data.location.lng
					self.model.address = {
						province: data.address_component.province,
						city: data.address_component.city,
						district: data.address_reference.town.title
					}
				})
			}
		})
	},
    getUserAddress: function() {
      if (!this.id) return false;
      getAddress(this.id).then(res => {
		this.model = {
			id: res.data.id,
			real_name: res.data.realName,
			phone: res.data.phone,
			address: {
			  province: res.data.province,
			  city: res.data.city,
			  district: res.data.district
			},
			detail: res.data.detail,
			houseNumber: res.data.houseNumber,
			latitude: res.data.latitude,
			longitude: res.data.longitude,
			is_default: res.data.isDefault,
			post_code: ""
		}
      });
    },
    async submit() {
      let real_name = this.model.real_name,
        phone = this.model.phone,
        detail = this.model.detail,
		houseNumber = this.model.houseNumber
      try {
        await this.$validator({
          real_name: [
            required(required.message("姓名")),
            attrs.range([2, 16], attrs.range.message("姓名"))
          ],
          phone: [
            required(required.message("联系电话")),
            chs_phone(chs_phone.message())
          ],
          detail: [required(required.message("详细地址"))],
		  houseNumber:  [required(required.message("门牌号"))]
        }).validate({ real_name, phone, detail, houseNumber });
      } catch (e) {
        return validatorDefaultCatch(e);
      }
      try {
        const self = this
        postAddress(self.model).then(function() {
          if (self.id) {
            uni.showToast({
              title: "修改成功",
              icon: "none",
              duration: 2000
            });
          } else {
            uni.showToast({
              title: "操作成功",
              icon: "none",
              duration: 2000
            });
          }
          self.$yrouter.back();
        });
      } catch (err) {
        uni.showToast({
          title: err.msg || err.response.data.msg || err.response.data.message,
          icon: "none",
          duration: 2000
        });
      }
    },
    changeIsDefault: function() {
      this.model.is_default = !this.model.is_default;
    }
  }
};
</script>

<style lang="less">
  .address {
    text {
      width: 100%;
      display: block;
    }
  }
</style>
